<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动的跑步页</title>
</head>
<body>

    <!-- 运动的跑步页面 -->

    <div class="page-run dpflex fdcolumn">

        <!-- 跑步页面的导航页 -->

        <ul class="run-nav dpflex">
            <li class="active"><a href="./motion-run.html">跑步</a></li>
            <li><a href="./motion-ride.html">骑行</a></li>
            <li><a href="./motion-train.html">课程训练</a></li>
           
        </ul>

        <!-- 跑步页面的跑步距离 -->

        <div class="main">
        <div class="run-position dpflex fdcolumn">

            <p>目前累计跑步距离</p>
            <p class="position1"><span id="position1"></span>公里</p>

        </div>

        <!-- 跑步页面的地图 -->

        <div class="run-map dpflex fdcolumn">

            <ul class="map-top dpflex">
                <li class="active"><a href="">户外跑</a></li>
                <li><a href="">燃脂跑</a></li>
                <li><a href="">跑步机</a></li>
            </ul>
            <div class="map-mid dpflex" >
                <span id="mapMid">GO</span>
            </div>
            <ul class="map-bot dpflex">
                <li class=" map-bot1 iconfont icon-shezhi"></li>
                <li class="map-bot2 active">设置目标  ></li>
                <li class=" map-bot3 iconfont icon-yinle"></li>
            </ul>
        </div>

        <!-- 跑步页面的跑步路线 -->

        <div class="run-rode dpflex">

            <div class="rode-left dpflex fdcolumn">
                <p class="p1">跑步路线</p>
                <p class="p2">使用跑步路线, 邂逅附近的同行者</p>
            </div>
            <div class="rode-right dpflex fdcolumn">
                <span>&gt;</span>
            </div>


        </div>

    </div>

        <!-- 底部 -->
        <!-- <div class="home-foot dpflex ">
            <div class="dpflex fdcolumn">
                <span class="iconfont icon-shouye"></span>
                <span class="span2">首页</span>

            </div>
            <div class="dpflex fdcolumn">
                <span class="iconfont icon-yundong-"></span>
                <span class="span2">运动</span>

            </div>
           
            <div class="dpflex fdcolumn">
                <span class="iconfont icon-quanzi"></span>
                <span class="span2">圈子</span>
            </div>

            <div class="dpflex fdcolumn">
                <span class="iconfont icon-wode"></span>
                <span class="span2">我的</span>

            </div>

        </div> -->


    </div>


    
</body>
</html>